<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<style type="text/css">
			body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Gi0nrCSacSSPvS1EjcbnggID"></script>
		<link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css" />
	    <link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css" />
	    <script type="text/javascript" src="../../js/jquery-latest.min.js"></script>
	    <script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
	    <script type="text/javascript" src="../../easyui/locale/easyui-lang-zh_CN.js"></script>
	    <script type="text/javascript" src="../../easyui/plugins/jquery.portal.js"></script>
	    <link rel="stylesheet" type="text/css" href="../../easyui/themes/portal.css" />
	    <link rel="stylesheet" type="text/css" href="../../css/index.css" />
		<title>地图展示</title>
	</head>
	<body>
		<div id="allmap"></div>
		<div id="dlg_well" class="easyui-dialog" closed="true" draggable="false" title="井基本信息" style="width: 600px; height: 330px; padding: 2px">
			<table class="table-striped">
				<tr>
					<td>井号：</td>
					<td><a>2014Z0</a><a id="wellId"></a></td>
					<td>井名：</td>
					<td><a id="wellName"></a></td>
				</tr>
				<tr>
				    <td>井型：</td>
				    <td>直井(单井)</td>
				    <td>井别：</td>
				    <td>探井</td>   
				</tr>
				<tr>
				  	<td>纵坐标X：</td>
				    <td><a id="lng"></a></td>
				  	<td>横坐标Y：</td>
				    <td><a id="lat"></a></td>
				</tr>    
			  <tr>
			  	<td>许可证日期：</td>
			    <td>2014-11-28</td>
			    <td>国家：</td>
			    <td>中国</td> 
			  </tr>    
			  <tr>
			  	<td>省：</td>
			    <td>辽宁省</td>
			    <td>县：</td>
			    <td></td> 
			   </tr>    
			   <tr>
			  	<td>地区：</td>
			    <td></td>
			    <td>行政区：</td>
			    <td></td> 
			   </tr> 
			   <tr>
			  	<td>甲方单位：</td>
			    <td>采油一厂</td>
			    <td>重点井级别：</td>
			    <td>正常</td>
			   </tr> 
			   <tr>
			    <td>井状态：</td>
			    <td>正常</td>		    	
			  	<td>开始井深：</td>
			    <td>6500</td>
			  </tr> 
			  <tr>
			    <td>井法律名：</td>
			    <td></td>
			    <td>井所在位置：</td>
			    <td></td>
			  </tr>
			  <tr>
			    <td>曾用名：</td>
			    <td></td>
			    <td>煤层气/储气库：</td>
			    <td>是</td>
			  </tr>
			</table>
		</div>
		
		<div class="pop-compare" id="pop-compare" style="bottom: 0px; display: none;padding-left: 1px;" data-load="false">
			<div class="pop-wrap">
				<p class="pop-compare-tips"></p>
				<div class="pop-inner" data-widget="tabs">
					<div class="diff-hd">
						<ul class="tab-btns clearfix">
							<li class="current" data-widget="tab-item"><a>对比栏</a></li>
						</ul>
						<div class="operate">
							<a class="hide-me" href="javascript:;" onclick="javascript:$('#pop-compare').css('display','none')">隐藏</a>
						</div>
					</div>
					<div class="diff-bd tab-cons">
						<div class="tab-con" data-widget="tab-content">
							<div class="diff-items clearfix" id="diff-items">
								<dl>
									<div id="well_1" style="width: 200px;">
										<div id="well_1_img" style="float: left;"><img width="24" height="24" src="../../images/sa/well/1.png"/></div>
										<div id="well_1_name" style="float: left;"><a class="diff-item-name">&nbsp;盘-1井</a></div>
										<div id="well_1_del" style="float: left;">
											<a class="diff-item-name" style="color: red;" href="javascript:void(0);" onclick="hiddenCompare('1')">&nbsp;删除</a>
										</div>
									</div>
								</dl>
								<dl class="hasItem" id="cmp_item_1079636" fore="1">
									<div id="well_2" style="width: 200px;">
										<div id="well_2_img" style="float: left;"><img width="24" height="24" src="../../images/sa/well/2.png"/></div>
										<div id="well_2_name" style="float: left;"><a class="diff-item-name">&nbsp;盘-2井</a></div>
										<div id="well_2_del" style="float: left;">
											<a class="diff-item-name" style="color: red;" href="javascript:void(0);" onclick="hiddenCompare('2')">&nbsp;删除</a>
										</div>
									</div>
								</dl>
								<dl class="hasItem">
									<div id="well_3" style="width: 200px;">
										<div id="well_3_img" style="float: left;"><img width="24" height="24" src="../../images/sa/well/3.png"/></div>
										<div id="well_3_name" style="float: left;"><a class="diff-item-name">&nbsp;盘-3井</a></div>
										<div id="well_3_del" style="float: left;">
											<a class="diff-item-name" style="color: red;" href="javascript:void(0);" onclick="hiddenCompare('3')">&nbsp;删除</a>
										</div>
									</div>
								</dl>
								<dl class="hasItem">
									<div id="well_4" style="width: 200px;">
										<div id="well_4_img" style="float: left;"><img width="24" height="24" src="../../images/sa/well/4.png"/></div>
										<div id="well_4_name" style="float: left;"><a class="diff-item-name">&nbsp;盘-4井</a></div>
										<div id="well_4_del" style="float: left;">
											<a class="diff-item-name" style="color: red;" href="javascript:void(0);" onclick="hiddenCompare('4')">&nbsp;删除</a>
										</div>
									</div>
								</dl>
							</div>
							<div class="diff-operate">
								<a class="btn-compare-b compare-active" id="goto-contrast"
									href="wellCompare.html" target="_blank">对比</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			function hiddenCompare(num) {
				$("#well_"+num+"_img").css("display","none");
				$("#well_"+num+"_name").css("display","none");
				$("#well_"+num+"_del").css("display","none");
			}
			function showCompare() {
				for(var i = 1; i < 5; i++) {
					$("#well_"+i+"_img").css("display","block");
					$("#well_"+i+"_name").css("display","block");
					$("#well_"+i+"_del").css("display","block");
				}
				$('#pop-compare').css('display','block');
			}
		</script>
	<style>
#pop-compare {
	display: none;
	position: fixed;
	bottom: -100px;
	right: 50%;
	margin-right: -495px;
	z-index: 100;
	width: 990px;
	height: 100px;
	background: #fff;
	-moz-box-shadow: 0 0 15px rgba(221, 221, 221, .8);
	-webkit-box-shadow: 0 0 15px rgba(221, 221, 221, .8);
	box-shadow: 0px 0px 15px rgba(221, 221, 221, 0.8);
}

#pop-compare {
	margin-right: -456px;
}

#pop-compare .pop-wrap {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 990px;
}

.pop-compare-tips {
	display: none;
	height: 27px;
	margin-top: -29px;
	line-height: 27px;
	border: 1px solid #db9a9a;
	color: #c00;
	text-align: center;
	background: #ffe8e8;
	_margin-top: 0;
}

:focus {
	outline: 0;
}

#pop-compare .pop-inner {
	height: 133px;
}

#pop-compare .diff-hd {
	position: relative;
}

#pop-compare .diff-bd {
	position: relative;
}

#pop-compare .tab-con {
	border: 2px solid #95B8E7;
	border-top: 0;
}

ol,ul {
	list-style: none;
}

#pop-compare .scroll-item {
	padding: 6px 10px;
	_padding: 10px;
}

#pop-compare .scroll-item {
	position: relative;
	height: 90px;
}

#pop-compare .scroll-btn {
	position: relative;
	top: 30px;
	z-index: 10;
	width: 14px;
	height: 50px;
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	background-repeat: no-repeat;
}

#pop-compare .sb-prev {
	float: left;
	background-position: 0 0;
}

#pop-compare span.no-prev,#pop-compare .disabled#sc-prev {
	background-position: 0 -100px;
	cursor: default;
}

#pop-compare .sb-next {
	float: right;
	background-position: -16px 0;
}

#pop-compare span.no-next,#pop-compare .disabled#sc-next {
	background-position: -16px -100px;
	cursor: default;
}

#pop-compare div.scroll-con {
	width: 905px;
	height: 90px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}

#pop-compare #scroll-con-inner {
	position: absolute;
	z-index: 10;
	left: 0px;
	top: 0px;
}

.ac {
	text-align: center;
}

#pop-compare .scroll-loading {
	width: 900px;
	height: 90px;
	line-height: 90px;
}

#pop-compare div.diff-items {
	padding: 6px;
	color: #ccc;
	height: 90px;
	overflow: hidden;
}

#pop-compare .diff-operate {
	position: absolute;
	right: 22px;
	top: 22px;
	width: 85px;
	text-align: center;
}

a {
	color: #666;
	text-decoration: none;
}

a:link,a:visited {
	color: #666;
}

a.compare-active {
	background-position: 0 -392px;
	color: #333;
	cursor: pointer;
}

#pop-compare .hide-me,.diff-operate a {
	color: #005aa0;
}

#goto-contrast {
	display: block;
	width: 59px;
	height: 30px;
	font: 700 14px/30px verdana;
	margin-left: 13px;
	margin-bottom: 11px;
	border-radius: 3px;
	background: #fff;
	border: 1px solid #ddd;
	color: #ccc;
	cursor: default;
}

.compare-active#goto-contrast {
	border: 0;
	color: #fff;
	background-color: #E74649;
	background-image: -ms-linear-gradient(top, #E74649 0, #DF3033 100%);
	background-image: -moz-linear-gradient(top, #E74649 0, #DF3033 100%);
	background-image: -o-linear-gradient(top, #E74649 0, #DF3033 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E74649),
		color-stop(1, #DF3033));
	background-image: -webkit-linear-gradient(top, #E74649 0, #DF3033 100%);
	background-image: linear-gradient(to bottom, #E74649 0, #DF3033 100%);
	cursor: pointer;
}

#pop-compare .diff-items dl,#pop-compare .scroll-con dl {
	float: left;
	overflow: hidden;
	margin-right: 10px;
	padding: 17px 10px 12px 0;
	border-right: 1px dotted #95B8E7;
}

#pop-compare .diff-items dd,#pop-compare .scroll-con dd,#scroll-con-inner .dd
	{
	float: left;
	width: 140px;
}

#pop-compare a.diff-item-name {
	height: 3em;
	line-height: 1.5em;
	overflow: hidden;
	display: block;
	color: #333;
}

.del-comp-item {
	padding-left: 10px;
}

#pop-compare .del-comp-item {
	visibility: hidden;
	color: #005aa0;
}

img {
	vertical-align: middle;
}

a img {
	border: 0;
}

#pop-compare .diff-hd .tab-btns {
	height: 32px;
	border: 1px solid #ddd;
	border-bottom: 2px solid #95B8E7;
	_overflow: hidden;
}

#pop-compare .diff-hd .operate {
	width: 190px;
	text-align: right;
	position: absolute;
	right: 0px;
	top: 0px;
	padding-right: 22px;
	height: 30px;
	line-height: 30px;
	clear: both;
}

#pop-compare .diff-hd li {
	float: left;
	position: relative;
	width: 80px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	*zoom: 1:;
	font: 14px/30px "microsoft yahei";
}

#pop-compare .tab-btns .current {
	position: relative;
	left: -1px;
	margin-top: -4px;
	height: 36px;
	background: #fff;
	border: 2px solid #95B8E7;
	border-bottom: 0;
}

#pop-compare .tab-btns a {
	color: #666;
}

#pop-compare .tab-btns .current a {
	color: #95B8E7;
}
</style>
	</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap", {mapType:BMAP_HYBRID_MAP});    // 创建Map实例
	var point = new BMap.Point(122.080702,41.127012);
	map.centerAndZoom(point,11);
	map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));   //添加地图类型控件
	map.addControl(new BMap.NavigationControl());
	map.setCurrentCity("盘锦");          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	
	var menu = new BMap.ContextMenu();
	var txtMenuItem = [
		{
			text:'上井路线',
			callback:function(){
				search(point,points[0]); 
				function search(start,end){ 
					var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true, enableDragging:true}});
					driving.search(start,end);
				}
			}
		},
		{
			text:'多井对比',
			callback:function(){
				showCompare();
				return false;
			}
		}
	];
	for(var i=0; i < txtMenuItem.length; i++){
		menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
	}
	map.addContextMenu(menu);
	
	map.disableDragging();     //禁止拖拽
	setTimeout(function(){
	   map.enableDragging();   //两秒后开启拖拽
	   //map.enableInertialDragging();   //两秒后开启惯性拖拽
	}, 2000);
	
	var num = 0;
	var points = new Array();
	
	// 编写自定义函数,创建标注
	function addMarker(lng, lat){
		var pt = new BMap.Point(lng, lat);
		var myIcon = new BMap.Icon("../../images/sa/well/"+ (parseInt((num)%12) + 1)+".png", new BMap.Size(24,24));
		var marker = new BMap.Marker(pt,{icon:myIcon});
	  	map.addOverlay(marker);
	  	var count = num + 1;
	  	var wellName = '盘-' + count+'井';
	  	var label = new BMap.Label(wellName,{offset:new BMap.Size(20,-10)});
		marker.setLabel(label);
		marker.addEventListener("click", function(){
			$("#dlg_well").dialog("open");
			$("#wellId").text(count);
			$("#wellName").text(wellName);
			$("#lng").text(lng.toFixed(6));
			$("#lat").text(lat.toFixed(6));
			return false;
		});
		var compareMarker = function(e,ee,marker){
			showCompare();
			return false;
		}
		//创建右键菜单
		var markerMenu = new BMap.ContextMenu();
		markerMenu.addItem(new BMap.MenuItem("对比井信息", compareMarker.bind(marker)));
		marker.addContextMenu(markerMenu);
		
		points[num]=marker;
		num++;
	}
	
	// 随机向地图添加25个标注
	var bounds = map.getBounds();
	var sw = bounds.getSouthWest();
	var ne = bounds.getNorthEast();
	var lngSpan = Math.abs(sw.lng - ne.lng);
	var latSpan = Math.abs(ne.lat - sw.lat);
	for (var i = 0; i < 25; i ++) {
		addMarker(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
	}
</script>
